<template>
  <div>
    <el-button type="primary" @click="initNotification">显示提示</el-button>
    <div
      v-if="isVisible"
      class="notification"
      :style="notificationStyle"
      @mouseenter="pauseMovement"
      @mouseleave="resumeMovement"
    >
      <span class="notification-message">{{ props.content }}</span>
      <div class="button-container">
        <el-button type="success" @click="navigateToUrl" style="margin: 10px">去查看</el-button>
        <el-button type="danger" @click="closeNotification" style="margin: 10px">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const { proxy } = getCurrentInstance()
const props = defineProps({
  content: {
    type: String,
    default: '没有提示消息。'
  },
  naviUrl: {
    type: String,
    default: '/expire/rentexpire'
  }
})
const isVisible = ref(false)
const notificationStyle = ref({})
let direction = { x: 0, y: 0 }
const speed = 6 // 每次移动的距离（单位像素）
let interval // 用于存储定时器的引用
let isPaused = ref(false) // 用于跟踪是否暂停

const initNotification = () => {
  isVisible.value = true
  setInitialDirection()

  // 每50毫秒更新位置
  interval = setInterval(() => {
    if (isVisible.value && !isPaused.value) {
      updatePosition()
    }
  }, 100)

  // 20秒后自动关闭提示
  setTimeout(() => {
    isVisible.value = false
    clearInterval(interval)
  }, 20000)
}

const setInitialDirection = () => {
  const angle = Math.random() * 2 * Math.PI // 随机方向（0到2π）
  direction.x = Math.cos(angle) // 计算x方向
  direction.y = Math.sin(angle) // 计算y方向
  setRandomStartingPosition()
}

const setRandomStartingPosition = () => {
  notificationStyle.value = {
    position: 'fixed',
    left: `${Math.random() * (window.innerWidth - 500)}px`,
    top: `${Math.random() * (window.innerHeight - 400)}px`,
    width: '250px',
    height: '120px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    color: 'white',
    borderRadius: '8px',
    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.5)',
    transition: 'left 0.1s ease, top 0.1s ease'
  }
}

const updatePosition = () => {
  const currentLeft = parseFloat(notificationStyle.value.left)
  const currentTop = parseFloat(notificationStyle.value.top)

  let newX = currentLeft + direction.x * speed
  let newY = currentTop + direction.y * speed

  // 确保提示窗口不移动出窗口边界
  if (newX < 100 || newX > window.innerWidth - 100) {
    direction.x = -direction.x // 反向
    newX = Math.max(100, Math.min(newX, window.innerWidth - 100))
  }
  if (newY < 100 || newY > window.innerHeight - 100) {
    direction.y = -direction.y // 反向
    newY = Math.max(100, Math.min(newY, window.innerHeight - 100))
  }

  notificationStyle.value.left = `${newX}px`
  notificationStyle.value.top = `${newY}px`
}

const pauseMovement = () => {
  isPaused.value = true
}

const resumeMovement = () => {
  isPaused.value = false
}

function closeNotification() {
  isVisible.value = false
  clearInterval(interval)
}

function navigateToUrl() {
  // window.location.href = 'https://example.com';
  if (props.naviUrl) {
    proxy.$router.push({
      path: props.naviUrl
    })
  }
}

initNotification()
</script>

<style>
.notification {
  /* 过渡效果已在上面定义 */
}

.notification-message {
  margin: 10px 10px 0;
}

.button-container {
  display: flex;

  /* 按钮之间的间距 */
  width: 100%;
  margin-top: 5px;
  justify-content: space-between;
}
</style>
